<template>
  <div class="tabbar">
    <ul class="category">
      <li
        v-for="category in levelList"
        :key="category.categoryId"
        class="categoryItem"
      >
        <a class="cate-flex" href="javascript:;">
          <span>{{ category.categoryName }}</span>
          <span class="el-icon-arrow-right"></span>
          <div @click.prevent="toSearch" class="categoryList">
            <ul>
              <li v-for="level in levelThreeList" :key="level.categoryId">
                <a>
                  <img src="../../../static/images/10001.png" alt="" />
                  <span
                    :data-keyword="level.categoryName"
                    :data-category3Id="level.categoryId"
                    >{{ level.categoryName }}</span
                  >
                </a>
              </li>
            </ul>
          </div>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "Tabbar",
  data() {
    return {};
  },
  computed: {
    ...mapGetters("home", ["levelList", "levelThreeList"]),
  },
  methods: {
    toSearch(event) {
      if (event.target.tagName !== "SPAN") return;
      // 注意自定义属性取值要转全小写
      const { keyword, category3id } = event.target.dataset;
      this.$router.push({
        path: "/search",
        query: {
          category3Id: category3id,
          keyword,
        },
      });
    },
  },
  watch: {
    levelList(newValue) {
      // newValue为最新数据
      // 这行代码使数组内部就没有做数据劫持处理, 效率更高
      this.levelList = Object.freeze(newValue);
    },
    levelThreeList(newValue) {
      this.levelThreeList = Object.freeze(newValue);
    },
  },
};
</script>

<style lang="less" scoped>
.tabbar {
  position: absolute;
  z-index: 9;
  left: 0;
  top: 0;
  width: 234px;
  height: 460px;
  border: 0;
  color: #fff;
  background: rgba(105, 101, 101, 0.6);
  .category {
    padding: 20px 0;
    .categoryItem {
      .cate-flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 42px;
        padding: 0 30px;
        .categoryList {
          position: absolute;
          width: 992px;
          height: 460px;
          background-color: #fff;
          top: 0;
          bottom: 0;
          left: 234px;
          padding: 20px;
          box-sizing: border-box;
          display: none;
          ul {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            height: 100%;
            // justify-content: space-between;
            li {
              width: 250px;
              height: 65px;
              line-height: 65px;
              margin-bottom: 5px;
              a {
                display: flex;
                color: black;
                align-items: center;
                img {
                  width: 40px;
                  height: 40px;
                  margin-right: 20px;
                }
              }
              a:hover span {
                color: #ff6700;
              }
              &:last-child {
                margin-bottom: auto;
              }
            }
          }
        }
      }
    }
    .categoryItem:hover {
      background-color: #ff6700;
    }
    .categoryItem:hover .categoryList {
      display: block;
    }
  }
}
</style>